<template>
     <div class="div">
        <!-- 导航栏 -->
        <van-nav-bar left-arrow @click-left="onClickLeft">
            <template #title>
                <span>订单详情</span>
            </template>
        </van-nav-bar>
        <h3 style="margin-left: 18px;margin-top: 10px;">
            订单详情
        </h3>
        <van-cell-group inset style="margin-bottom: 10px;">
            <van-cell value="内容" >
                <template #title>
                    <span>预计送达</span><br>
                    <span>{{userOrde.orderDatetime}}</span>
                </template>
                <template #default>
                    <van-tag plain type="primary" 
                            color="#ff9101"
                            style="margin-right: 5px;">
                        <span class="span8">美团快送</span>
                    </van-tag>
                </template>
            </van-cell>
            <van-cell >
                <van-tabbar :fixed="false" :border="false" v-model="active" active-color="#000000" inactive-color="#000000">
                    <van-tabbar-item icon="edit">改订单信息</van-tabbar-item>
                    <van-tabbar-item icon="after-sale">申请售后</van-tabbar-item>
                    <van-tabbar-item icon="chat-o">在线联系</van-tabbar-item>
                </van-tabbar>
            </van-cell>
        </van-cell-group>
        <van-cell-group inset>
            <van-cell>
                <template #title>
                    <span class="span11">{{shop.shopName}}</span>
                    <van-icon name="arrow" />
                </template>
            </van-cell>
            <van-cell v-for="(i,idnex) in items"
                      :key="idnex">
                <template #icon>
                    <van-icon :name="getImagePath(i.itemPicture)" 
                    size="75"
                    class="search-icon" 
                    style="margin-right: 10px;"
                    />
                </template>
                <!-- 商品及内容 -->
                <template #title>
                    <span class="custom-title span12">{{i.itemName}}</span>
                </template>
                <template #default>
                    <span class="custom-title span12">￥{{i.itemPrice}}</span>
                </template>
                
                <template #label>
                    <span v-for="s in i.shoppingCartDetails" :key="s.id"
                          class="pingfen-title">
                        {{s.selectedValue}}
                    </span>
                    <br>
                    <span>X{{i.itemNum}}</span>
                </template>
            </van-cell>
            <!-- 选项 -->
            <van-cell>
                <template #title>
                    <span class="custom-title span12">打包费</span>
                    <br>
                    <span class="custom-title span12">用户配送费</span>
                    <br>
                    <van-col>
                        <van-icon size="25" :name="require('../../assets/img/红包.png')" />
                    </van-col>
                    <van-col>
                        <div >
                        <span class="custom-title span12">美团红包</span>
                        </div>
                    </van-col>
                </template>
                <template >
                    <span class="custom-title span12">￥1.2</span>
                    <br>
                    <span class="custom-title span12">￥2.2</span>
                    <br>
                    <span class="span13">暂无可用</span>
                    <van-icon name="arrow" />
                </template>
            </van-cell>
            <van-cell>
                <template #default>
                        <span class="custom-title span12" style="margin-left: 40%;">
                        <span class="span17">已优惠:￥3.4 &nbsp;合计￥{{ total }}</span> 
                    </span>
                </template>
            </van-cell>
        </van-cell-group>
     </div>
</template>

<script>
import axios from 'axios';
export default {
    props:["orderId"],
    name:"OrderDetails",
    data() {
        return {
            baseUrl: 'http://localhost:8081/images/item/',
            active: 0,
            icon: {
                active: 'https://img01.yzcdn.cn/vant/user-active.png',
                inactive: 'https://img01.yzcdn.cn/vant/user-inactive.png',
            },
            // token密钥
            token:'Bearer ' + localStorage.getItem("token"),
            // 用户订单
            userOrde:{},
            // 订单商品
            items:[],
            // 商家对象
            shop:{},
            user:{},
            isOrder:false
        }
    },
    computed:{
        total(){
            let total = 0;
            if (this.isOrder) {
                this.items.forEach(item => {
                    total += (item.itemPrice * item.itemNum)
                });
            }
            return total.toFixed(2);
        }
    },
    methods: {
        //拼接地址
        getImagePath(imgName){
            return `${this.baseUrl}${imgName}`;
        },
        onClickLeft(){
            // 后退一步
            this.$router.go(-1);
        },
        getOrder(){
            console.log(this.orderId);
            let that = this
            //1.发起axios请求添加至购物车

            axios.get('/api/order/getShopOrder', {
                params:{
                    orderId:this.orderId
                }
            })
            .then(response => {
                // 处理响应数据
                console.log(response.data.data);
                // 时间
                const { year, month, day } = response.data.data.orderDatetime.date;
                const { hour, minute, second } = response.data.data.orderDatetime.time;
                const date = new Date(year, month - 1, day, hour, minute, second);
                date.setMinutes(date.getMinutes() + 48 );// + Math.floor(Math.random() * 15) + 1)
                response.data.data.orderDatetime =  date.getMonth() + 1 +"-"+ date.getDate()+"  "+ date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false });
               
                this.userOrde = response.data.data;
                 
                 this.items = JSON.parse(response.data.data.orderDetails)
                console.log(this.items);
                this.isOrder = true
                 this.queryShop();
            })
            .catch(error => {
                // 处理错误
                console.error(error);
            });
        },
        queryShop(){
            axios.get("http://localhost:9090/api/shop/getListShopAndItemAndItemType",{
                params:{
                    shopId:this.userOrde.shopId,
                }
            })        
            .then(res => {    
                console.log(res.data.data);
                this.shop = res.data.data.shop;
            })        
            .catch(err => {            
                console.log(err.data)        
            }) 
        },
            
        
    },
    created(){
        this.getOrder()
    }
}
</script>

<style scoped>
.span11{
    font-size: 18px;
    color: #000000;
}
.span12{
    font-size: 15px;
    color: #000000;
}
.div{
    width: 100%;
    height: 1000px;
    background-color: #f0f0f0;
}
</style>